<template>
  <div>
    <div class="container">
      <el-form :inline="true" class="demo-form-inline" label-width="80px">
        <el-form-item label="门店名称">
          <el-input v-model.trim="query.advertisingName" size="small"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" icon="el-icon-search" @click="searchTable">查询</el-button>
          <el-button type="danger" size="small" @click="refresh">重置</el-button>
          <el-button type="success" size="small" icon="el-icon-plus" @click="showAddShopModal">添加</el-button>
        </el-form-item>
      </el-form>
      <div class="table-origin">
        <my-table ref="myTableRef" stripe border highlight-current-row align="center" size="medium" :columns="columns"
          :loader="loader" :page-size="pageSize" :page="page"
          :pagination="{layout:'->, total, sizes, prev, pager, next, jumper',pageSizes: [10, 30, 50, 100]}">

          <template v-slot:handle="{row}">
            <el-button plain type="primary" size="mini" @click="showEditShopModal(row)">编辑</el-button>
            <el-button v-if="row.state==-1" plain type="success" size="mini" @click="online(row)">启用</el-button>
            <el-button v-if="row.state==0" plain type="warning" size="mini" @click="offline(row)">禁用</el-button>
            <el-button plain type="danger" size="mini" @click="submitDeleteShop(row)">删除</el-button>
            <el-button plain type="success" size="mini" @click="showShopUserModal(row)">查看员工</el-button>
          </template>
          <template v-slot:area="{row}">
            {{row.provinceName}}/{{row.cityName}}/{{row.areaName}}
          </template>
          <template v-slot:state="{row}">
            <el-tag v-if="row.state==0" type="success" size="mini" effect="dark">启用</el-tag>
            <el-tag v-if="row.state==-1" type="warning" size="mini" effect="dark">禁用</el-tag>
            <el-tag v-if="row.state==-2" type="danger" size="mini" effect="dark">已删除</el-tag>
          </template>
        </my-table>
      </div>
    </div>

    <addShop ref="addShopRef"></addShop>
  </div>
</template>

<script>
  import addShop from './core/addShop.vue'
  import {
    shopList,
    deleteAdvertising,
    onlineAdvertising,
    offlineAdvertising,
  } from '@/api/advertising.js'
  import {
    getRegionTreeData
  } from "@/static/region.js"

  export default {
    components: {
      addShop
    },
    data() {
      return {
        page: 1,
        pageSize: 10,
        columns: [{
            label: '序号',
            type: 'index',
            fixed: "left",
            align: "center",
            index: (index) => {
              return ((this.page - 1) * this.pageSize + index + 1)
            },
            width: 50
          },
          {
            label: '门店名称',
            fixed: "left",
            prop: 'advertisingName',
            align: "left",
            width: 200
          },
          {
            label: '区域',
            prop: 'area',
            align: "left",
            width: 200
          },
          {
            label: '地址',
            prop: 'address',
            align: "left",
            width: 250
          },
          {
            label: '联系人	',
            prop: 'contact',
            align: "left",
          },
          {
            label: '电话',
            prop: 'iphone',
            align: "left",
            width: 120
          },{
            label: '固定电话',
            prop: 'phone',
            align: "left",
            width: 120
          },
          {
            label: '创建时间',
            prop: 'createTime',
            align: "left",
            width: 150
          },
          {
            label: '更新时间',
            prop: 'updateTime',
            align: "left",
            width: 150
          },
          {
            label: '状态',
            prop: 'state',
            align: "left",
            width: 80
          },
          {
            label: '操作',
            prop: 'handle',
            fixed: "right",
            align: "left",
            width: 300
          }
        ],

        regionOptions: getRegionTreeData(),
        query: {
          advertisingName: undefined,
          typeId: undefined,
          province: undefined,
          city: undefined,
          area: undefined,
          address: undefined,
          contact: undefined,
          iphone: undefined,
          state: undefined,
          region: [],
        },
      }
    },
    mounted() {

    },
    methods: {
      //加载数据
      async loader(page, pageSize) {
        var params = Object.assign(this.query, {
          page,
          pageSize
        });
        var res = await shopList(params);
        this.page = page;
        this.pageSize = pageSize;
        return {
          total: res.data.length,
          list: res.data.slice((page - 1) * pageSize, page * pageSize)
        };
      },

      // 重置
      refresh() {
        this.query = {
          advertisingName: undefined,
          typeId: undefined,
          province: undefined,
          city: undefined,
          area: undefined,
          address: undefined,
          contact: undefined,
          iphone: undefined,
          state: undefined,
          region: [],
        },
        this.searchTable();
      },
      searchTable() {
        this.$refs.myTableRef.refresh(this.page);
      },

      async submitDeleteShop(row) {
        this.$confirm(`确定删除门店“${row.advertisingName}”？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          var res = await deleteAdvertising(row.advertisingId);
          this.$utils.showSuccessMessage(res.msg);
          this.searchTable();
        });
      },
      showAddShopModal() {
        this.$refs.addShopRef.open();
      },
      showEditShopModal(row) {
        this.$refs.addShopRef.open(row.advertisingId);
      },
      async online(row) {
        var res = await onlineAdvertising(row.advertisingId);
        this.$utils.showSuccessMessage(res.msg);
        this.searchTable();
      },
      async offline(row) {
        var res = await offlineAdvertising(row.advertisingId);
        this.$utils.showSuccessMessage(res.msg);
        this.searchTable();
      },

      handleRegionChange(value) {
        this.query.province = value[0];
        this.query.city = value[1];
        this.query.area = value[2];
      },

      showShopUserModal(row) {
        this.$router.push({
          path: '/system/advertising/shopUserManage',
          query: {
            advertisingId: row.advertisingId
          }
        });
      }

    }
  }
</script>

<style scoped>
  .container {
    padding: 15px;
  }
</style>
